<template>
  <div class="app-container home">
    <!-- <el-button @click="clickFn" v-preventReClick>测试</el-button> -->
    <div class="chart">
      <div id="top"></div>
      <div id="bottom"></div>
    </div>
  </div>
</template>

<script setup name="Index">
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const newmsg = ref();
const clickFn = () => {
  getCeList().then();
};
let chart = null;
const initChart1 = () => {
  chart = echarts.init(document.getElementById("top"));
  chart.setOption({
    graphic: {
      elements: [
        {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "欢迎使用",
            fontSize: 80,
            fontWeight: "bold",
            lineDash: [0, 200],
            lineDashOffset: 0,
            fill: "transparent",
            stroke: "#000",
            lineWidth: 1,
          },
          keyframeAnimation: {
            duration: 3000,
            loop: true,
            keyframes: [
              {
                percent: 0.7,
                style: {
                  fill: "transparent",
                  lineDashOffset: 200,
                  lineDash: [200, 0],
                },
              },
              {
                // Stop for a while.
                percent: 0.8,
                style: {
                  fill: "transparent",
                },
              },
              {
                percent: 1,
                style: {
                  fill: "black",
                },
              },
            ],
          },
        },
      ],
    },
  });
};
const initChart = () => {
  chart = echarts.init(document.getElementById("bottom"));
  chart.setOption({
    graphic: {
      elements: [
        {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "经典印务Mes系统",
            fontSize: 80,
            fontWeight: "bold",
            lineDash: [0, 200],
            lineDashOffset: 0,
            fill: "transparent",
            stroke: "#000",
            lineWidth: 1,
          },
          keyframeAnimation: {
            duration: 3000,
            loop: true,
            keyframes: [
              {
                percent: 0.7,
                style: {
                  fill: "transparent",
                  lineDashOffset: 200,
                  lineDash: [200, 0],
                },
              },
              {
                // Stop for a while.
                percent: 0.8,
                style: {
                  fill: "transparent",
                },
              },
              {
                percent: 1,
                style: {
                  fill: "black",
                },
              },
            ],
          },
        },
      ],
    },
  });
};
onMounted(() => {
  initChart1();
  initChart();
  setTimeout(() => {
    window.onresize = function () {
      chart?.resize();
    };
  }, 10);
});

const sockets = {
    res(data) {
        //后台返回数据
        console.log(data)
    },
    chat(data) {
        //可以根据后台添加各种事件 前提是名字和路由一样
        newmsg.value = data
    },
    save(data){
      console.log(data);
    }
}
const sendMessage2 = () => {
    // proxy.$socket.io.emit('broadcast', {
    //     //发送内容 数据自己决定传什么
    //     uid: 213213,
    // })
}
const sendMessage = () => {
    proxy.$socket.io.emit('save', '1')
}

onMounted(async () => {
    //在onMounted中挂载事件 不挂载的话sockets里的事件好像都监听不到
    proxy.$addSockets(sockets, proxy)
    // sendMessage()
    // sendMessage2()
})
</script>

<style scoped lang="scss">
.chart {
  text-align: center;
  //   display: flex;
  //   justify-content: center;
  //   width: 100%;
  //   height: 100%;
}
#top {
  width: 100%;
  height: 200px;
}
#bottom {
  width: 100%;
  height: 200px;
}
</style>
